<template>
  <div class="module">
    <div class="top">
      <span class="label">当前时间</span>
      <div class="clock-wrap">
        <div class="clock">
          <div class="flip">
            <div class="digital front" data-number="0"></div>
            <div class="digital back" data-number="1"></div>
          </div>
          <div class="flip">
            <div class="digital front" data-number="0"></div>
            <div class="digital back" data-number="1"></div>
          </div>
          <em class="divider">:</em>
          <div class="flip">
            <div class="digital front" data-number="0"></div>
            <div class="digital back" data-number="1"></div>
          </div>
          <div class="flip">
            <div class="digital front" data-number="0"></div>
            <div class="digital back" data-number="1"></div>
          </div>
          <em class="divider">:</em>
          <div class="flip">
            <div class="digital front" data-number="0"></div>
            <div class="digital back" data-number="1"></div>
          </div>
          <div class="flip">
            <div class="digital front" data-number="0"></div>
            <div class="digital back" data-number="1"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="item" :style="{ width: `${100 / list.length}%` }" v-for="item in list" :key="item.label">
        <div class="num">{{ item.time }}</div>
        <div class="label">
          <span>{{ item.label }}</span>
          <span class="icon">
            <svg-icon icon-class="icon_stars2"></svg-icon>
          </span>
        </div>
      </div>
    </div>
    <div class="chart-item" id="chart-pie-2"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { realPx, formatSeconds } from '@/utils/common'
import { getTime } from '@/api/api-mock';

var Flipper = (function() {
  function Flipper(node, currentTime, nextTime) {
    this.isFlipping = false;
    this.duration = 600;
    this.flipNode = node;
    this.frontNode = node.querySelector(".front");
    this.backNode = node.querySelector(".back");
    this.setFrontTime(currentTime);
    this.setBackTime(nextTime);
  }
  Flipper.prototype.setFrontTime = function(time) {
    this.frontNode.dataset.number = time;
  };
  Flipper.prototype.setBackTime = function(time) {
    this.backNode.dataset.number = time;
  };
  Flipper.prototype.flipDown = function(currentTime, nextTime) {
    var _this = this;
    if (this.isFlipping) {
      return false;
    }
    this.isFlipping = true;
    this.setFrontTime(currentTime);
    this.setBackTime(nextTime);
    this.flipNode.classList.add("running");
    setTimeout(function() {
      _this.flipNode.classList.remove("running");
      _this.isFlipping = false;
      _this.setFrontTime(nextTime);
    }, this.duration);
  };
  return Flipper;
})();

export default {
  data() {
    return {
      list: [
        { label: '预计时间(总)', time: formatSeconds(876) },
        { label: '已执行时间(总)', time: formatSeconds(0) },
        { label: '预计剩余时间(总)', time: formatSeconds(0) },
      ],
      loaded: false
    }
  },
  methods: {
    initClock() {
      var getTimeFromDate = function(date) {
        return date
          .toTimeString()
          .slice(0, 8)
          .split(":")
          .join("");
      };
      var flips = document.querySelectorAll(".flip");
      var now = new Date();
      var nowTimeStr = getTimeFromDate(new Date(now.getTime() - 1000));
      var nextTimeStr = getTimeFromDate(now);
      var flippers = Array.from(flips).map(function(flip, i) {
        return new Flipper(flip, nowTimeStr[i], nextTimeStr[i]);
      });
      setInterval(() => {
        var now = new Date();
        var nowTimeStr = getTimeFromDate(new Date(now.getTime() - 1000));
        var nextTimeStr = getTimeFromDate(now);
        for (var i = 0; i < flippers.length; i++) {
          if (nowTimeStr[i] === nextTimeStr[i]) {
            continue;
          }
          flippers[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
        }
        this.$store.commit("changeNow", now);
      }, 1000);
    },
    getOption(obj) {
      console.log(obj)
      var option = {
        // color: ["rgba(59, 230, 255, 1)", "rgba(99, 102, 254, 1)", "rgba(35, 72, 214, 1)", "rgba(3, 187, 255, 1)"],
        color: ['#ed523e', '#ef8f34', 'f0ff00', '#30d028', '#00ffa2', '#00deff', '#6366fe'],
        series: [
          {
            type: "pie",
            radius: ["40%", "55%"],
            avoidLabelOverlap: false,
            selectedMode: 'single',
            startAngle: 45,
            itemStyle: {
              color: ['#2348d6', '#3d6fff', '#1734a0'],
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  fontSize: realPx(86),
                  color: "rgba(197, 239, 255, 1)",
                  formatter: "{b}  {c}",
                  distanceToLabelLine: realPx(50)
                },
                labelLine: {
                  length: realPx(130),
                  length2: realPx(250),
                  show: true,
                  lineStyle: {
                    width: realPx(10)
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: realPx(100),
              }
            },
            labelLine: {
              show: false
            },
            data: obj.series[0].data
          },
          {
            type: "pie",
            radius: ["65%", "80%"],
            avoidLabelOverlap: false,
            startAngle: 45,
            itemStyle: {
              color: ['#ed523e', '#ef8f34', 'f0ff00', '#30d028', '#00ffa2', '#00deff', '#6366fe'],
              normal: {
                label: {
                  show: false,
                  position: "center",
                  fontSize: realPx(86),
                  color: "rgba(197, 239, 255, 1)",
                  formatter: function(item) {
                    return `${item.name}\n${formatSeconds(item.value)}`
                  },
                  distanceToLabelLine: realPx(50)
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                position: "center",
                fontSize: realPx(100),
                color: "rgba(197, 239, 255, 1)",
                formatter: function(item) {
                  return `${item.name}\n${formatSeconds(item.value)}`
                },
              }
            },
            labelLine: {
              show: false
            },
            data: obj.series[1].data
          }
        ]
      };
      return option;
    },
    renderEcharts(obj) {
      var myChart = echarts.init(document.getElementById("chart-pie-2"));
      let option = this.getOption(obj);
      myChart.setOption(option);
      this.myChart = myChart;
    },
    resize() {
      this.myChart && this.myChart.resize();
    }
  },
  mounted() {
    this.initClock();
    // 根据数据来渲染echarts
    getTime().then(res => {
      if (res.success) {
        this.renderEcharts(res.obj);
        setTimeout(this.resize, 0);
      }
    })
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style lang="less" scoped>
.module {
  width: 100%;
  height: 100%;
  font-size: 14px;
  .top {
    display: flex;
    justify-content: center;
    padding-top: 27px;
    .label {
      font-size: 11px;
      padding-top: 12px;
      line-height: 1;
      color: rgba(204, 241, 247, 1);
      display: inline-block;
      margin-right: 12px;
    }
    .clock-wrap {
      height: 100%;
      display: inline-block;
      .clock {
        display: flex;
        .divider {
          font-size: 16px;
          line-height: 23px;
          font-style: normal;
          color: rgba(204, 241, 247, 1);
          margin: 0 4px;
        }
        .flip {
          position: relative;
          width: 22.3px;
          height: 23px;
          font-size: 24px;
          line-height: 23px;
          text-align: center;
          margin: 0 2px;
          .digital {
            &::before,
            &::after {
              font-family: "DS-Digital-Bold-Italic";
              position: absolute;
              content: attr(data-number);
              left: 0;
              right: 0;
              color: rgba(204, 241, 247, 1);
              overflow: hidden;
              -webkit-perspective: 30px;
              perspective: 30px;
            }
            &::before {
              background: rgba(30, 63, 189, 1);
              top: 0;
              bottom: 50%;
              border-bottom: 1px solid transparent;
            }
            &::after {
              background: rgba(89, 91, 217, 1);
              top: 50%;
              bottom: 0;
              line-height: 0;
            }
          }
          .back::before,
          .front::after {
            z-index: 1;
          }
          .back::after {
            z-index: 2;
            transform-origin: center top;
            transform: rotateX(0.5turn);
          }
          .front::before {
            z-index: 3;
          }
          &.running {
            .front::before {
              transform-origin: center bottom;
              animation: frontFlipDown 0.6s ease-in-out;
              box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
              backface-visibility: hidden;
            }
            .back::after {
              animation: backFlipDown 0.6s ease-in-out;
            }
          }
        }
      }
    }
  }
  .middle{
    font-size: 0;
    padding: 30px 20px 0;
    .item{
      display: inline-block;
      height: 50px;
      .num{
        font-family: "DIN-Alternate-Bold";
        font-size: 20px;
        line-height: 1;
        margin-bottom: 18px;
        color: rgba(59, 230, 255, 1);
      }
      .label{
        font-size: 12.28px;
        line-height: 1;
        color: rgba(3, 187, 255, 1);
        display: flex;
        justify-content: center;
        .icon{
          width: 6px;
          height: 6px;
          margin-left: 4px;
        }
      }
    }
  }
  .chart-item{
    width: 100%;
    height: 166px;
  }

  @-webkit-keyframes frontFlipDown {
    to {
      transform: rotateX(0.5turn);
    }
  }
  @keyframes frontFlipDown {
    to {
      transform: rotateX(0.5turn);
    }
  }
  @-webkit-keyframes backFlipDown {
    to {
      transform: rotateX(0);
    }
  }
  @keyframes backFlipDown {
    to {
      transform: rotateX(0);
    }
  }
}
</style>
